<template>
  <div class="addDialog">
    <el-dialog :title="form.id?$t('holidays.editHolidayCalendar'):$t('holidays.addHolidayCalendar')"
               :visible.sync="dialogVisible"
               :append-to-body="true"
               @open="opend"
               :close-on-click-modal="false"
               width="40%">
      <div style="padding:0 0 10px">{{$t('holidays.name')}}</div>
      <el-input v-model="form.name"
                clearable>
      </el-input>
      <div style="padding:10px 0">{{$t('holidays.desc')}}</div>
      <el-input type="textarea"
                :rows="2"
                clearable
                v-model="form.description">
      </el-input>
      <div style="padding:10px 0;display:flex;justify-content:space-between;align-items:center;">
        <div>{{$t('holidays.holidaysList')}}</div>
        <label style="display:flex;justify-content:space-between;align-items:center;cursor: pointer;user-select: none;">
          <el-button type="primary"
                     @click="handleItem('add')"
                     style="padding:0 4px;font-size:18px;margin-right:5px"
                     circle
                     size="mini">{{$t('holidays.addIcon')}}</el-button>
          <span>{{$t('holidays.add')}}</span>
        </label>
      </div>
      <el-table :data="form.festivalList"
                v-loading="loading"
                border
                height="300px"
                style="width: 100%;height:70%">
        <el-table-column prop="name"
                         :label="$t('holidays.name')">
        </el-table-column>
        <el-table-column :label="$t('holidays.date')">
          <template slot-scope="scope">
            {{scope.row.startDate}}-{{scope.row.endDate}}
          </template>
        </el-table-column>
        <el-table-column :label="$t('holidays.repeatYearly')"
                         width="120">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.fixed"
                       active-color="#13ce66"
                       inactive-color="#C1C7CD">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column :label="$t('holidays.action')"
                         width="120">
          <template slot-scope="scope">
            <el-tooltip v-delTabIndex effect="dark"
                        :content="$t('holidays.edit')"
                        placement="top">
              <i @click="handleItem('edit',scope.row,scope.$index)"
                 style="padding:0 10px;cursor: pointer;user-select: none;"
                 class="el-icon-edit"></i>
            </el-tooltip>
            <el-tooltip v-delTabIndex effect="dark"
                        :content="$t('holidays.delete')"
                        placement="top">
              <i @click="handleItem('delete',scope.row)"
                 style="padding:0 10px;cursor: pointer;user-select: none;"
                 class="el-icon-delete"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer"
            class="dialog-footer">
        <el-button size="small"
                   type="info"
                   @click="dialogVisible=false">{{$t('holidays.cancel')}}</el-button>
        <el-button size="small"
                   type="primary"
                   @click="save">{{$t('holidays.save')}}</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="comTitle"
               :visible.sync="addDialogVisible"
               :close-on-click-modal="false"
               :append-to-body="true"
               width="30%">
      <div style="padding:0 0 10px">{{$t('holidays.name')}}</div>
      <el-input v-model="addForm.name"
                style="width:80%"
                clearable>
      </el-input>
      <div style="padding:10px 0">{{$t('holidays.date')}}</div>
      <el-date-picker v-model="addForm.daterange"
                      v-if="addDialogVisible"
                      style="width:80%"
                      type="daterange"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      range-separator="-"
                      :start-placeholder="$t('holidays.startDate')"
                      :end-placeholder="$t('holidays.endDate')">
      </el-date-picker>
      <span slot="footer"
            class="dialog-footer">
        <el-button size="small"
                   type="info"
                   @click="addDialogVisible=false">{{$t('holidays.cancel')}}</el-button>
        <el-button size="small"
                   type="primary"
                   @click="saveHoliday">{{$t('holidays.confirm')}}</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      addDialogVisible: false,
      form: {
        festivalList: [],
        delIds: [],
      },
      addForm: {},
      loading: false,
      handleType: null,
      handleIndex: null,
    }
  },
  computed: {
    comTitle () {
      return {
        'add': this.$t('holidays.addHoliday'),
        'edit': this.$t('holidays.editHoliday')
      }[this.handleType]
    }
  },
  methods: {
    opend () {
      this.form.festivalList = this.form.festivalList ? this.form.festivalList.filter(v => v.id) : []
    },
    async save () {
      if (!(this.form.name && this.form.name.trim())) {
        return this.$message.error('Please input name.')
      }
      this.$emit('editHolidays', this.form)
    },
    saveHoliday () {
      if (!(this.addForm.name && this.addForm.name.trim())) {
        return this.$message.error('Please input name.')
      }
      if (this.form.festivalList.filter((v, i) => i !== this.handleIndex).find(v => v.name === this.addForm.name.trim())) {
        return this.$message.error('Name already exists.')
      }
      if (!(this.addForm.daterange && this.addForm.daterange[0])) {
        return this.$message.error('Please select start time.')
      }
      if (!(this.addForm.daterange && this.addForm.daterange[1])) {
        return this.$message.error('Please select end time.')
      }
      const index = this.addForm.id ? this.form.festivalList.findIndex(v => v.id === this.addForm.id) : -1
      if (this.handleType === 'edit') {
        this.$set(this.form.festivalList, index !== -1 ? index : this.handleIndex, {
          ...this.addForm,
          name: this.addForm.name.trim(),
          endDate: this.addForm.daterange[1],
          startDate: this.addForm.daterange[0]
        })
      } else {
        this.form.festivalList.unshift({
          name: this.addForm.name.trim(),
          fixed: true,
          endDate: this.addForm.daterange[1],
          startDate: this.addForm.daterange[0]
        })
      }
      this.addDialogVisible = false
    },
    handleItem (type, item, index) {
      this.handleType = type
      this.handleIndex = index
      switch (type) {
        case 'add':
          this.addItem()
          break;
        case 'edit':
          this.editItem(item)
          break;
        case 'delete':
          this.deleteItem(item)
          break;
      }
    },
    addItem () {
      this.addForm = {}
      this.addDialogVisible = true
    },
    editItem (item) {
      this.addForm = {
        ...item,
        daterange: [item.startDate, item.endDate]
      }
      this.addDialogVisible = true
    },
    async deleteItem (item) {
      const params = {
        id: item.id
      }
      if (item.id) {
        const { data: res } = await this.$interface.taskManager.festivalValid(params)
        if (res.data) {
          return this.$msgbox({
            title: this.$t("prompt.title"),
            message: this.$t('holidays.deleteTip'),
            type: "warning",
          })
        }
      }
      const index = this.form.festivalList.findIndex(v => v.name === item.name)
      item.id && !this.form.delIds.includes(item.id) && this.form.delIds.push(item.id)
      this.form.festivalList.splice(index, 1)
    }
  }
}
</script>
<style lang="scss" scoped>
.addDialog {
}
</style>
